<template>
  <Dialog v-model="dialogVisible" title="评分详情" width="900px">
    <!-- 基础信息 -->
    <el-divider content-position="left">基础信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="评价计划">
        {{ scoreData.planName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="评价科目">
        {{ scoreData.subjectName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="科目代码">
        {{ scoreData.subjectCode || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考生姓名">
        {{ scoreData.candidateName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        {{ scoreData.candidateIdNumber || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考评员">
        {{ scoreData.evaluatorName || '-' }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 成绩信息 -->
    <el-divider content-position="left">成绩信息</el-divider>
    <el-descriptions :column="3" border>
      <el-descriptions-item label="理论成绩">
        <el-tag :type="getScoreType(scoreData.theoryScore)">
          {{ scoreData.theoryScore || 0 }}分
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="实操成绩">
        <el-tag :type="getScoreType(scoreData.practiceScore)">
          {{ scoreData.practiceScore || 0 }}分
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="综合成绩">
        <el-tag :type="getScoreType(scoreData.totalScore)">
          {{ scoreData.totalScore || 0 }}分
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="满分">
        {{ scoreData.maxScore || 100 }}分
      </el-descriptions-item>
      <el-descriptions-item label="得分率">
        <span v-if="scoreData.totalScore && scoreData.maxScore">
          {{ ((scoreData.totalScore / scoreData.maxScore) * 100).toFixed(1) }}%
        </span>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="是否通过">
        <el-tag :type="scoreData.isPassed ? 'success' : 'danger'">
          {{ scoreData.isPassed ? '通过' : '不通过' }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 状态信息 -->
    <el-divider content-position="left">状态信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="评分状态">
        <el-tag :type="getScoreStatusType(scoreData.scoreStatus)">
          {{ getScoreStatusText(scoreData.scoreStatus) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="是否复核">
        <el-tag :type="scoreData.isReviewed ? 'success' : 'info'">
          {{ scoreData.isReviewed ? '已复核' : '未复核' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="提交时间">
        {{ formatDateTime(scoreData.submitTime) || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="确认时间">
        {{ formatDateTime(scoreData.confirmTime) || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="复核人" v-if="scoreData.isReviewed">
        {{ scoreData.reviewerName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="复核时间" v-if="scoreData.isReviewed">
        {{ formatDateTime(scoreData.reviewTime) || '-' }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 评价意见 -->
    <el-divider content-position="left">评价意见</el-divider>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="评价意见">
        <div style="white-space: pre-wrap;">{{ scoreData.evaluatorComments || '-' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="评分备注">
        <div style="white-space: pre-wrap;">{{ scoreData.scoreComments || '-' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="复核意见" v-if="scoreData.isReviewed">
        <div style="white-space: pre-wrap;">{{ scoreData.reviewComments || '-' }}</div>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 详细评分数据 -->
    <el-divider content-position="left">详细评分数据</el-divider>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="评分详情">
        <pre v-if="scoreData.scoreDetails" style="background: #f5f5f5; padding: 10px; border-radius: 4px; max-height: 200px; overflow-y: auto;">{{ formatScoreDetails(scoreData.scoreDetails) }}</pre>
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="分项得分">
        <pre v-if="scoreData.sectionScores" style="background: #f5f5f5; padding: 10px; border-radius: 4px; max-height: 200px; overflow-y: auto;">{{ formatSectionScores(scoreData.sectionScores) }}</pre>
        <span v-else>-</span>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getScoreRecord } from '@/api/eval/score'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const scoreData = ref({})
const loading = ref(false)

const getScoreType = (score: number) => {
  if (!score) return 'info'
  if (score >= 90) return 'success'
  if (score >= 80) return 'warning'
  if (score >= 60) return 'primary'
  return 'danger'
}

const getScoreStatusType = (status: number) => {
  const typeMap = { 0: 'warning', 1: 'primary', 2: 'success' }
  return typeMap[status] || 'info'
}

const getScoreStatusText = (status: number) => {
  const textMap = { 0: '草稿', 1: '已提交', 2: '已确认' }
  return textMap[status] || '未知'
}

const formatDateTime = (dateTime: string | Date) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const formatScoreDetails = (details: string) => {
  if (!details) return ''
  try {
    const parsed = JSON.parse(details)
    return JSON.stringify(parsed, null, 2)
  } catch {
    return details
  }
}

const formatSectionScores = (scores: string) => {
  if (!scores) return ''
  try {
    const parsed = JSON.parse(scores)
    return JSON.stringify(parsed, null, 2)
  } catch {
    return scores
  }
}

const open = async (id: number) => {
  dialogVisible.value = true
  loading.value = true

  try {
    const data = await getScoreRecord(id)
    scoreData.value = data
  } catch (error) {
    console.error('获取评分详情失败:', error)
    ElMessage.error('获取评分详情失败')
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>